<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>

</head>
<body>
</body>
</html>
<script>
// ------------  `?.`    -----------
// 假设后台返回的数据 要有 name 和 home
const data = {
  name: '张三', // 若 后台 没传 对应的 key
  home: '李沧',
  // child: {
    // name: '谁的孩子'
  // }
}

const say = (key) => {
  console.log(data[key]);
}

// say('name');
// data.fn();
// console.log(data.child.name);

// 描述：经常 对象.属性.属性  ->  或 undefined.属性
  // 即会报错。  因为 undefined.xx 就会报错

// 所以，为了解决上面的问题：ES8 提出了  `?.` 的语法；作用：避免了 undefined?.xx 直接报错
console.log(data?.child?.name);


// -------------  ES6+ 提供了一个新的写法：`??`  ------------------
// 作用： xx ?? '表达式'
  // 只有 xx 为 null 或 undefined 时，才返回 表达式的值

const person = {
  name: null, // 若 后台 没传 对应的 key
  home: '',
  // child: {
    // name: '谁的孩子'
  // }
  age: 0
}

console.log(person.name ?? '佚名'); // 默认值的处理，若 后台 不传 数据，默认值 可以 通过 `||` 进行默认值的添加

console.log(person.age ?? 1);

console.log(person.home ?? '暂无地址');

</script>